<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <span id='requestButton'>
      Make a request
    </span>
    <a id="link" target="_blank" href="empty.html">Link to empty.html</a>

    <p>Successes:
    <div id="successes">
    </div>

    <p>Failures:
    <div id="failures">
    </div>
    <script type="text/javascript">
      var eventListener = function(evt) {
        if( evt == 'success'){
          document.getElementById("successes").innerHTML = ++successes;
        } else if( evt == 'failure') {
          document.getElementById("failures").innerHTML = ++failures;
        }
      };

      var s = document.getElementById('successes');
      var f = document.getElementById('failures');

      s.addEventListener('click', function() { eventListener('success') });
      f.addEventListener('click', function() { eventListener('failure') });

      var httpRequest;
      document.getElementById('requestButton').addEventListener('click', repeatLoadPage);

      function makeRequest() {
        httpRequest = new XMLHttpRequest();
        url = window.location.protocol + "//" + window.location.host + "/helloworld";
        httpRequest.onreadystatechange = alertContents;
        httpRequest.open("GET", url);
        httpRequest.send();
      }

      var successes = 0;
      var failures = 0;

      function alertContents() {
        if (httpRequest.readyState == 4) {
          if (httpRequest.status == 200) {
            document.getElementById("successes").click();
            successes++;
          } else {
            document.getElementById("failures").click();
            failures++;
          }
        }
      }

      function repeatLoadPage() {
        setInterval(makeRequest, 300);
      }
    </script>
  </body>
</html>
